<template>
  <div>
    <Tabs type="card" :value="tabIndex" @on-click="tabClick">
      <TabPane label="服务协议" name="1"></TabPane>
      <TabPane label="隐私政策" name="2"></TabPane>
      <TabPane label="关于我们" name="3"></TabPane>
    </Tabs>
    <Form ref="formValidate" :model="configInfo" :label-width="60">
      <FormItem label="服务协议" v-if="tabIndex == 1">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="configInfo.service_protocol"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div>
      </FormItem>
      <FormItem label="隐私政策" v-if="tabIndex == 2">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor1"
            :defaultConfig="toolbarConfig1"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="configInfo.privacy_policy"
            :defaultConfig="editorConfig1"
            :mode="mode"
            @onCreated="onCreatedaa"
          />
        </div>
      </FormItem>

      <FormItem label="关于我们" v-if="tabIndex == 3">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor2"
            :defaultConfig="toolbarConfig2"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="configInfo.about_us"
            :defaultConfig="editorConfig2"
            :mode="mode"
            @onCreated="onCreatedaa"
          />
        </div>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit()">提交</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import config from "@/config";
import { getToken } from "../../libs/util";

const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
const baseImgeUrl =
  process.env.NODE_ENV === "development"
    ? config.baseImgUrl.dev
    : config.baseImgUrl.pro;
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  components: {
    Editor,
    Toolbar,
  },
  data() {
    return {
      baseImgeUrl: baseImgeUrl,
      action_url: baseUrl + "/admin/image/uploadImg",
      header: { Authorization: getToken() },
      imgUrl: "",
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editor1: null,
      editor2: null,
      html1: "<p>hello</p>",
      toolbarConfig1: {},
      toolbarConfig2: {},
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            server: baseUrl + "/admin/image/uploadImage",
            fieldName: "image",
            headers: {
              Authorization: getToken(),
            },
            // 单个文件上传成功之后
            onSuccess(file, res) {},
          },
          uploadVideo: {
            //上传视频配置
            server: baseUrl + "/admin/image/uploadImage",
            fieldName: "image",
            headers: {
              Authorization: getToken(),
            },
          },
        },
      },
      editorConfig1: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            server: baseUrl + "/admin/image/uploadImage",
            fieldName: "image",
            headers: {
              Authorization: getToken(),
            },
            // 单个文件上传成功之后
            onSuccess(file, res) {},
          },
          uploadVideo: {
            //上传视频配置
            server: baseUrl + "/admin/image/uploadImage",
            fieldName: "image",
            headers: {
              Authorization: getToken(),
            },
          },
        },
      },
      editorConfig2: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            server: baseUrl + "/admin/image/uploadImage",
            fieldName: "image",
            headers: {
              Authorization: getToken(),
            },
            // 单个文件上传成功之后
            onSuccess(file, res) {},
          },
          uploadVideo: {
            //上传视频配置
            server: baseUrl + "/admin/image/uploadImage",
            fieldName: "image",
            headers: {
              Authorization: getToken(),
            },
          },
        },
      },
      mode: "default", // or 'simple',
      tabIndex: "1",
      configInfo: {
        service_protocol: "",
        privacy_policy: "",
        about_us: "",
      },
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onCreatedaa(editor) {
      this.editor1 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    tabClick(name) {
      this.tabIndex = name;
    },
    // 查询管理员信息
    getConfigInfo() {
      this.$axios("/admin/config/getConfigInfo", { type: 3 }).then((res) => {
        this.configInfo = res || {};
      });
    },
    handleSuccess(res, file) {
      this.formItem.img = res.data.src;
      this.imgUrl = res.data.src;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式错误",
        desc: "不支持该文件类型",
      });
    },
    handleSubmit() {
      this.$axios("/admin/config/setConfig", this.configInfo).then((res) => {
        this.$Message.success("保存成功");
        this.getConfigInfo();
      });
    },
  },
  created() {
    this.getConfigInfo();
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
